<template>
	<view class="check-container">
		<view class="uni-title uni-common-mt uni-common-pl">选择服务套餐</view>
		<view class="uni-list">
			<radio-group>
				<label @click="currentTap(index)" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in serviceItems" :key="item.name">
					<view>
						<radio :disabled="state !== '预约'" style="transform:scale(0.7)" :value="item.name" :checked="index === select" />
					</view>
					<view>{{item.name}}</view>
					<view class="radioRight">{{item.price}}元</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			state: String,
			checkArg:String,
			serviceItems: {
				type:Array,
				default: () => {
					return [{
							id:0,
							value: "A",
							name: "茶水服务+投影+空调+两位服务员",
							price: 100
						},
						{
							id:1,
							value: "B",
							name: "选项服务二",
							price: 120
						},
						{
							id:2,
							value: "C",
							name: "选项服务三",
							price: 130
						},
						{	
							id:3,
							value: "D",
							name: "选项服务四",
							price: 140
						},
						{
							id:4,
							value: "E",
							name: "选项服务五",
							price: 100
						},
						{
							id:5,
							value: "F",
							name: "选项服务六",
							price: 100
						},
					];
				},
			},
			current:{
				type:Number,
				default:-1,
			}
		},
		data() {
			return {
				select:-1,
				items: [{
						id:0,
						value: "A",
						name: "茶水服务+投影+空调+两位服务员",
						price: 100
					},
					{
						id:1,
						value: "B",
						name: "选项服务二",
						price: 120
					},
					{
						id:2,
						value: "C",
						name: "选项服务三",
						price: 130
					},
					{	
						id:3,
						value: "D",
						name: "选项服务四",
						price: 140
					},
					{
						id:4,
						value: "E",
						name: "选项服务五",
						price: 100
					},
					{
						id:5,
						value: "F",
						name: "选项服务六",
						price: 100
					},
				]
			}
		},
		methods: {
			currentTap(index){
				this.current = -1
				console.log(this.select,"===" + index)
				if(index == this.select){
					this.select = -1
					this.$emit('checkArgs', -1, "不选择套餐", 0)
				}else{
					for (let i = 0; i < this.serviceItems.length; i++) {
						if (this.serviceItems[i].name === this.serviceItems[index].name) {
							this.select = i
							this.$emit('checkArgs', this.serviceItems[i].id, this.serviceItems[i].name, this.serviceItems[i].price)
							uni.showModal({
								title: '套餐详细',
								content:this.serviceItems[i].intro,
								showCancel:false
							})
							// this.current = i;
							break;
						}
					}
				}
			},
			radioChange: function(evt) {
				
				for (let i = 0; i < this.serviceItems.length; i++) {
					if (this.serviceItems[i].name === evt.detail.value) {
						this.select = i
						this.$emit('checkArgs', this.serviceItems[i].id, this.serviceItems[i].name, this.serviceItems[i].price)
						uni.showModal({
							title: '套餐详细',
							content:this.serviceItems[i].intro,
							showCancel:false
						})
						// this.current = i;
						break;
					}
				}
			}
		},
		created() {
			if(this.checkArg!==null&&this.checkArg!==""){
				const that = this
				this.current= this.items.filter(function(op){
					return op.value == that.checkArg
				})[0].id
				
			}
		}
	}
</script>

<style>
	.check-container {
		width: 100%;
	}

	.radioRight {
		flex-grow: 1;
		text-align: right;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		justify-content: flex-start;
		font-size: 28rpx;
	}

	.uni-list-cell::after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #ffffff;
		width: 95%;
		display: inline-block;
	}

	.uni-list .uni-list-cell:last-child::after {
		height: 0rpx;
	}

	.uni-title {
		font-size: 28rpx;
		font-weight: 500;
		padding: 10rpx 0;
		line-height: 1.5;
	}

	.uni-common-mt {
		margin-top: 10rpx;
	}

	.uni-common-pl {
		padding-left: 36rpx;
	}

	.uni-list::before {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #ffffff;
	}

	.uni-list {
		background-color: #FFFFFF;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.uni-list-cell-pd {
		padding: 14rpx 36rpx;
	}
</style>
